<template>
  <el-dialog style="min-width: 1400px;"
             title="阅读记录"
             :close-on-click-modal="false"
             :visible.sync="visible">
    <el-form :model="dataForm"
             label-width="100px" style="padding:0 100px;">
      <div style="display: flex;">
        <div>
          <span class="title">阅读数量：</span>
          <span></span>
        </div>
        <div style="margin-left: 180px;">
          <span class="title">阅读字数：</span>
          <span></span>
        </div>
      </div>
      <div style="display: flex;">
        <div>
          <span class="title">阅读时长：</span>
          <span></span>
        </div>
        <div style="margin-left: 180px;">
          <span class="title">阅读天数：</span>
          <span></span>
        </div>
      </div>
      <div class="title">获得成就：</div>
      <div class="more-wrapper">
        <el-tag type="success" v-for="i in 20" class="item" :key="i">标签{{i}}</el-tag>
      </div>
      <div class="title">获得称号：</div>
      <div class="more-wrapper">
        <el-tag v-for="i in 20" class="item" :key="i">标签{{i}}</el-tag>
      </div>
      <div class="title">阅读历史：</div>
      <div class="more-wrapper">
        <div style="text-align: center;border-radius: 4px;background-color: #eee" class="item" v-for="i in 8" :key="i">
          <img src="../../../assets/img/login_bg.jpg" width="100px" height="120px"/>
          <div style="margin-top: 8px;">绘本名称</div>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          pbUserId: '',
          type: '',
          name: '',
          petLevel: '',
          petExp: '',
          roundLevel: '',
          integral: ''
        },
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/picbook/pbpet/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm = data.data.pbPet
              }
            })
          }
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  .title {
    font-weight: bold;
  }

  .more-wrapper {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin: 5px 15px 5px 0;
    }
  }
</style>
